@charset "utf-8";

* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

html {
    height: 100%;
}

body {
    height: 100%;
    display: flex;
    flex-direction: column;
    font-size: 0.12rem;
}

$w:6.4rem;

header {
    width: $w;
    height: 1.78rem;

    >.logo {
        width: $w;
        height: 0.9rem;
        display: flex;
        align-items: center;

        >img:nth-of-type(1) {
            width: 1.45rem;
            height: 0.5rem;
            margin-left: 0.3rem;
            padding-right: 0.2rem;
            border-right: 0.02rem solid #c2c2c2;
        }

        >img:nth-of-type(2) {
            width: 1.2rem;
            height: 0.5rem;
            margin-left: 0.15rem;
        }

        >p {
            font-size: 0.2rem;
            margin-left: 0.2rem;
            color: #314057;
            font-family: 楷体;
        }
    }

    >.find {
        width: $w;
        height: 0.88rem;
        background-color: #2c2d2f;
        display: flex;
        align-items: center;
        justify-content: space-around;

        >p {
            font-size: 0.24rem;
            color: #fff;
        }

        >.seach {
            width: 4.22rem;
            height: 0.54rem;
            background-color: #fff;
            border-radius: 0.5rem;
            display: flex;
            align-items: center;

            >img {
                width: 0.4rem;
                height: 0.4rem;
                margin-left: 0.1rem;
            }

            >input {
                width: 3.7rem;
                height: 0.54rem;
                background-color: #fff;
                border-radius: 0.5rem;
                border: 0;
                outline: none;
                font-size: 0.24rem;
                box-sizing: border-box;
                padding-left: 0.05rem;
                color: #999999;
            }
        }

        >img {
            width: 0.35rem;
            height: 0.12rem;
        }
    }
}

main {
    width: $w;
    height: 100%;
    flex: 1;
    background-color: #efefef;
    overflow: hidden;
    >.content {
        position: relative;
        width: $w;
        min-height: 101%;
        >.refresh{
            position: absolute;
            left: 0;
            top: -0.5rem;
            width: $w;
            height: 0.5rem;
            line-height: 0.5rem;
            text-align: center;
            color: blue;
            background-color:paleturquoise;
            font-size: 0.22rem;
        }
        >.more{
            position: absolute;
            left: 0;
            bottom: -0.5rem;
            width: $w;
            height: 0.5rem;
            line-height: 0.5rem;
            text-align: center;
            color: blue;
            background-color:paleturquoise;
            font-size: 0.22rem;
        }
        >.banner {
            width: $w;
            height: 2.99rem;

            img {
                width: 100%;
                height: 100%;
            }

        }
        >.nav{
            width: $w;
            height: 1.61rem;
            background-color: #fff;
            >ul{
                width: $w;
                height: 1.61rem;
                border-bottom: 0.01rem solid #e7e7e7;
                display: flex;
                align-items: center;
                >li{
                    width: 25%;
                    text-align: center;
                    border-right: 0.01rem solid #e7e7e7;
                    >img{
                        width: 0.8rem;
                        height: 0.8rem;
                    }
                    >p{
                        font-size: 0.22rem;
                        margin-top: 0.12rem;
                        color: #8a8a8a;
                    }
                }
                >li:last-of-type{
                    border: 0;
                }
            }
        }
        >.text{
            width: $w;
            height: 0.92rem;
            line-height: 0.92rem;
            text-align: center;
            font-size: 0.22rem;
            background-color: #fff;
            >span{
                color: red;
            }
        }
        >.btn{
            width: $w;
            height: 1.33rem;
            text-align: center;
            background-color: #fff;
            border-bottom: 0.01rem solid #d0d0d0;
            >button{
                width: 5.82rem;
                height: 1.06rem;
                background-color: red;
                font-size: 0.34rem;
                color: #fff;
                border: 0;
            }
        }
        >.hot{
            width: $w;
            height: 2.67rem;
            background-color: #fff;
            border-top: 0.01rem solid #d0d0d0;
            border-bottom: 0.01rem solid #d0d0d0;
            margin-top: 0.2rem;
            >.h-top{
                width: 5.84rem;
                height: 0.72rem;
                margin: auto;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-bottom: 0.01rem solid #d0d0d0;
                >span,p{
                    font-size: 0.24rem;
                }
            }
            >.h-bom{
                width: 5.84rem;
                height: 1.94rem;
                margin: auto;
                >ul{
                    width: 5.84rem;
                    height: 1.94rem;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    align-items: center;
                    >li{
                        width: 1.35rem;
                        height: 0.7rem;
                        line-height: 0.7rem;
                        text-align: center;
                        font-size: 0.24rem;
                        border: 0.02rem solid #d1d1d1;
                        border-radius: 0.1rem;
                    }
                }
            }
        }
        >.cars{
            width: $w;
            background-color: #fff;
            margin-top: 0.2rem;
            >h1{
                font-size: 0.26rem;
                height: 0.7rem;
                line-height: 0.7rem;
                box-sizing: border-box;
                padding-left: 0.28rem;
                font-weight: normal;
                border-top: 0.01rem solid #d0d0d0;
                border-bottom: 0.01rem solid #d0d0d0;
            }
            >ul{
                width: $w;
                >li{
                    width: $w;
                    height: 2.31rem;
                    display: flex;
                    border-bottom: 0.01rem solid #d0d0d0;
                    >.left{
                        width: 2.45rem;
                        height: 2.31rem;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        >img{
                            width: 2.05rem;
                            height: 1.2rem;
                        }
                    }
                    >.right{
                        width: 3.95rem;
                        height: 2.31rem;
                        >h2{
                            font-size: 0.26rem;
                            font-weight: normal;
                            margin-top: 0.3rem;
                        }
                        >p:nth-of-type(1){
                            margin-top: 0.1rem;
                            margin-bottom: 0.25rem;
                        }
                        >p:nth-of-type(2){
                            margin-top: 0.15rem;
                        }
                        >p{
                            font-size: 0.22rem;
                            color: #a7a7a7;
                            >span{
                                color: red;
                                font-weight: 100;
                            }
                        }
                        >span{
                            font-size: 0.22rem;
                            color: red;
                            >mark{
                                font-size: 0.28rem;
                                color: red;
                                background-color: #fff;
                            }
                        }
                        >del{
                            font-size: 0.2rem;
                            color: #989898;
                            margin-left: 0.28rem;
                        }
                    }
                }
            }
        }
    }
   
}